<template>
    <div>
        <mark>生命周期</mark>
        <button @click="handleSwitch">切换</button>
        <Son v-if="is" :abc="abc" @getChange="getChange"></Son>
        <el-carousel :interval="4000" type="card" height="200px">
    <el-carousel-item v-for="item in 6" :key="item">
      <h3 class="medium">{{ item }}</h3>
    </el-carousel-item>
  </el-carousel>
    </div>
</template>
<script>
import Son from "./Son.vue"
export default {
    data(){
        return{
            is:true,
            abc:"来自父级的数据"
        }
    },
    methods:{
        getChange(value){
            this.abc=value
        },
         handleSwitch(){
        //初级 小白
        // if(this.is){
        //     this.is=false
        // }else{
        //     this.is = true
        // }
        //三目运算符 入门一年
        //this.is = this.is ? false:true

        //老手
            this.is = !this.is
         }
    },
    components:{Son}
    
}
</script>
<style>
  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
  }
  
  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }
  
  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
</style>